<template>
  <div>
    <div class="title">
      <div>炉电除尘</div>

      <div>
        <el-button size="mini" type="primary">导出</el-button>
      </div>
    </div>

    <el-form :inline="true" size="mini">
      <!-- <el-form-item label="超温级别">
        <el-select
          v-model="queryParams.overTemperaturelevel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in OverTemperaturelevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="机组">
        <el-select v-model="queryParams.Unit" placeholder="请选择">
          <el-option
            v-for="item in Unit"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="班值">
        <el-select v-model="queryParams.ClassValue" placeholder="请选择">
          <el-option
            v-for="item in ClassValue"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="日期">
        <el-date-picker
          v-model="queryParams.time"
          type="date"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <table>
      <tr>
        <th>考核项</th>
        <th v-for="item in tableColumn" :key="item">{{ item }}</th>
      </tr>
      <tr v-for="(item, index) in tableRow" :key="index">
        <td>{{ item }}</td>
        <td v-for="(ele, i) in tableData" :key="i * 7">
          <div>{{ ele[index] }}</div>
          <!-- <el-input v-model="ele[index]"></el-input> -->
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { OverTemperaturelevel, Unit, ClassValue, tableData2 } from '../dict'
export default {
  data () {
    return {
      OverTemperaturelevel: OverTemperaturelevel,
      Unit: Unit,
      ClassValue: ClassValue,
      queryParams: {
        overTemperaturelevel: null,
        Unit: null,
        ClassValue: null,
        time: null

      },
      // 表头数据
      tableColumn: [
        'A1电场U1(V/m)',
        'A1电场I1(V/m)',
        'A1电场U2(V/m)',
        'A1电场I2(V/m)',
        'A2电场U1(V/m)',
        'A2电场I1(V/m)',
        'A2电场U2(V/m)',
        'A2电场I2(V/m)',
        'A3电场U1(V/m)',
        'A3电场I1(V/m)',
        'A3电场U2(V/m)'
      ],
      // 表格每一列列头数据
      tableRow: [
        'KKS编码',
        '上限',
        '下限',
        '00:00:00',
        '01:00:00',
        '02:00:00',
        '03:00:00',
        '04:00:00',
        '05:00:00',
        '06:00:00',
        '07:00:00',
        '08:00:00',
        '09:00:00'
      ],
      tableData: tableData2

    }
  },
  methods: {
    handleQuery () {},
    reset () {
      this.queryParams = {
        overTemperaturelevel: null,
        Unit: null,
        ClassValue: null,
        time: null,
        pageNum: 1,
        pageSize: 10
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  background-color: #2e5185;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  min-width: 95%;
  margin-bottom: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  text-align: center;
  /* width: 100px !important; */
}
</style>
